<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/laydate/laydate.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <!-- header -->
    <div class="header">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn"></a>
        </div>
        <div class="head-title">
            <h6>评论详情 <em class="f20" id="count">(0条回复)</em></h6>
        </div>
        <!--<div class="head-action">-->
        <!--<a href="javascript:void(0);" tapmode class="action-btn"></a>-->
        <!--</div>-->
    </div>
    <!-- header end -->
</div>


<div class="mescroll" id="mescroll" style="padding-top: 1.5rem">
    <div class="comment-area">
        <div class="comment-list area" style="display: block;">
            <ul id="commentHtml">

            </ul>
            <div class="comment-input">
                <div class="input-box">
                    <input type="text" id="inputContent" readonly data-pid="" placeholder="写评论...">
                    <!--<button class="send-btn" tapmode onclick="comment_add()">确定</button>-->
                </div>
            </div>


        </div>
    </div>
</div>

<div class="edit-model">
    <div class="edit-input">
        <div class="message-flex">
            <div class="message-box" id="message">
                <div class="message" id="article" contenteditable="true"></div>
            </div>
            <div class="message-img" style="display: none;" id="msgImg">
                <img src="" alt="">
                <span class="delete dn" tapmode onclick="removePic(this,event)"></span>
            </div>
        </div>

        <div class="But">
            <div class="but-list">
                <a href="javascript:void(0);" tapmode onclick="upload()" class="imgBut"></a>
                <a href="javascript:void(0);" tapmode onclick="showVideo()" class="videoBut"></a>
                <a href="javascript:void(0);" tapmode onclick="toAiteList()" class="aiTeBut"></a>
            </div>
            <span class="submit" tapmode onclick="comment_add()">确定</span>
        </div>
    </div>
</div>


<!--评论通用-->
<div class="photoViewerCommon">
    <div class="swiper-container photoViewer-common">
        <ul class="swiper-wrapper">
            <!--<li class="swiper-slide"><img src="../../image/banner01.png" alt=""></li>-->
            <li class="swiper-slide" onclick="closeViewCommon()"><img onclick="showViewCommon(event)" id="currentPic" class="swiper-lazy" src="" alt=""><div class="swiper-lazy-preloader"></div></li>
        </ul>
        <div class="photoViewer-bottom">
            <div onclick="closeViewCommon()" class="closeViewer"></div>
            <div class="swiper-pagination"></div>
            <div onclick="downloadPicCommon(event)" class="download"></div>
        </div>
    </div>
</div>


</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>

<script type="text/javascript" src="../../script/detailSwiper.js"></script>
<script type="text/javascript" src="../../script/comment.js"></script>

<script type="text/javascript">
    var cid = '';//评论id
    var detail_id = '';//详情id
    var video_id = 0;
    var msgImg_id = 0;
    apiready = function () {

        setFixStatusBar(); //设置状态栏

        cid = api.pageParam.id;
        detail_id = api.pageParam.detail_id;
        keybackListener()
        pop.loading();

        getCommentDetail()

        api.addEventListener({
            name: 'aite'
        }, function(ret, err) {
            console.log(JSON.stringify(ret.value));
            var mid = ret.value.id;
            var mname = ret.value.name;
            var mUrl = '../activity/person_index';
            var m_id = {member_id: mid}
            var word = '<span style="display: inline; color: #ff7777;" class="aite" data-id="'+mid+'" onclick=\'commonUrl("'+mUrl+'",'+jsonChange(m_id)+')\'>@'+mname+'</span>　';
            // $("#article").append(word);
            checkSystemType(function () {
                $("#article").append(word);
            },function () {
                _insertimg(word)
            });
        });
    };

    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        }
    });

    /*下拉刷新的回调 */
    function downCallback() {
        getCommentDetail()

        //mescroll.endErr();
    }

    //二级评论获取评论目标
    var _input = $("#inputContent");
    var _editModel = $(".edit-model");
    var _article = $("#article");
    _input.click(function () {
        _editModel.show();
        var html = _article.html()
        _article.html('').focus();
    });

    function reply(id, name) {
        var pid = id;
        _input.attr('placeholder', '回复：' + name);
        _input.attr('data-pid', pid);
        _editModel.show();
        _article.focus();
        console.log(pid)
    }

    /*_article.blur(function () {
        if (_article.html() == '' || msgImg_id != 0) {
            _input.val('');
            _input.attr('placeholder', '写评论...');
            _input.attr('data-pid', '');
        }
    });*/


    //关闭评论框
    _editModel.on('click', function () {
        _input.val('');
        _input.attr('placeholder', '写评论...');
        _input.attr('data-pid', '');
        _editModel.hide()
    });
    //阻止事件冒泡 关闭评论框
    _editModel.on('click', '.edit-input', function (event) {
        event.stopPropagation()
        /*_article.focus();*/
    });

    //评论
    var addStatus = true;
    function comment_add() {
        var pid = '';
        var ptype = type;
        if (_input.attr('data-pid')) {
            pid = _input.attr('data-pid');
            ptype = 0;
        }
        var uidsArr = [];
        $("#article .aite").each(function () {
            var _this = $(this);
            var _thisId = _this.attr('data-id');
            uidsArr.push(_thisId);
        });
        var param = {
            token: $api.getStorage('token'),
            type: ptype,//类型：1新闻 2帖子 3活动 0回复 4赛事，5战况，6投票，7广场
            key_id: key_id,
            content: _article.html(),
            pid: pid,//当type为0的时候必须传入,二级回复，就是评论的id
            icon: msgImg_id,
            void_id: video_id,
            uids: uidsArr.toString()
        }
        if (!isDefine(param.content)&&!isDefine(param.icon)&&!isDefine(param.void_id)) {
            pop.notice('请发表你的评论内容');
            return false;
        }
        if(addStatus == false){
            return;
        }
        console.log(jsonChange(param));
        // return;
        pop.loading();
        getAjax(Interface.comment_add, param, function (res) {
            addStatus = false;

            _editModel.hide();
            _article.html('');
            _input.attr('placeholder', '写评论...');
            _input.attr('data-pid', '');

            $("#msgImg").siblings('img').attr('src','').removeAttr('data-id');
            $("#msgImg").hide();
            msgImg_id = 0;
            video_id = 0;

            pop.notice(res.msg)
            pop.close();
            setTimeout(function () {
                getCommentDetailAll()
                addStatus = true;
            }, 1500)
        }, function (error) {
            pop.notice(error.msg)
            pop.close();
        })
        _article.blur();//失去焦点
    }



    var member_name = '';
    var data_id = '';
    //活动详情
    function getCommentDetail() {
        var param = {
            token: $api.getStorage('token'),
            comment_id: cid,
        }
        getAjax(Interface.get_comment, param, function (res) {
            console.log(jsonChange(res))
            var comment = res.data[0];
            $("#count").html('(共'+comment.count+'条回复)');
            _input.attr('placeholder', '回复：' + comment.member_name);
            member_name = comment.member_name;
            data_id = comment.id;
            var commentHtml = '';
            if (isDefine(comment)) {

                commentHtml = getEvaluteList(res.data,)

                $("#commentHtml").html(commentHtml)
            } else {
                $("#commentHtml").html(noData)
            }

            pop.close();
            mescroll.endErr();
        }, function (error) {
            pop.notice(error.msg)
            pop.close();
            mescroll.endErr();
        })
    }



    //评论
    function comment_add() {
        var pid = data_id;
        if (_input.attr('data-pid')) {
            pid = _input.attr('data-pid');
        }
        var param = {
            token: $api.getStorage('token'),
            type: 0,//类型：1新闻 2帖子 3活动 0回复
            key_id: detail_id,
            content: _article.html(),
            pid: pid,//当type为0的时候必须传入,二级回复，就是评论的id
        }
        if (!isDefine(param.content)) {
            pop.notice('请输入评论内容');
            return false;
        }
        pop.loading();
        getAjax(Interface.comment_add, param, function (res) {
            _editModel.hide();
            $(".face").slideUp(); //慢慢向上收
            _article.html('');
            _input.val('');
            _input.attr('placeholder', '回复：'+member_name);
            _input.attr('data-pid', data_id);
            pop.notice(res.msg)
            pop.close();
            setTimeout(function () {
                getCommentDetail()
            }, 500)
        }, function (error) {
            pop.notice(error.msg)
            pop.close();
        })
    }

    //点赞或者取消点赞 类型type：1新闻 2帖子 3活动 4评论
    function clickFabulous(stype,type,pid) {
        //活动点赞
        if(type == 3){
            pid = detail_id;
            if($('#love').hasClass('on')){
                stype = 2
            }else {
                stype = 1
            }
        }
        fabulous(stype,type,pid,function (res) {
            if(stype==1){
                pop.notice('点赞成功')
            }else {
                pop.notice('取消点赞')
            }
            setTimeout(function () {
                getCommentDetail()
            },500)
        })
    }

    // function _insertimg(str) {
    //
    //     var selection = window.getSelection ? window.getSelection() : document.selection;
    //
    //     var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    //
    //     if (!window.getSelection) {
    //
    //         document.getElementById('article').focus();
    //
    //         var selection = window.getSelection ? window.getSelection() : document.selection;
    //
    //         var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    //
    //         range.pasteHTML(str);
    //
    //         range.collapse(false);
    //
    //         range.select();
    //
    //     } else {
    //
    //         document.getElementById('article').focus();
    //
    //         range.collapse(false);
    //
    //         var hasR = range.createContextualFragment(str);
    //
    //         var hasR_lastChild = hasR.lastChild;
    //
    //         while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling &&
    //         hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
    //
    //             var e = hasR_lastChild;
    //
    //             hasR_lastChild = hasR_lastChild.previousSibling;
    //
    //             hasR.removeChild(e)
    //
    //         }
    //
    //         range.insertNode(hasR);
    //
    //         if (hasR_lastChild) {
    //
    //             range.setEndAfter(hasR_lastChild);
    //
    //             range.setStartAfter(hasR_lastChild)
    //
    //         }
    //
    //         selection.removeAllRanges();
    //
    //         selection.addRange(range)
    //
    //     }
    //
    // }




</script>
